<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>158_事件委托_上</title>
	</head>
	<body>
		<button id="btn">点我一下</button>
		<ul id="list">
			<li><a href="javascript:;">链接一</a></li>
			<li><a href="javascript:;">链接二</a></li>
			<li><a href="javascript:;">链接三</a></li>
			<li><a href="javascript:;">链接四</a></li>
		</ul>
		<script>
			/* 
			我一个希望:
				只绑定一次事件，既可以让所有的超链接，包括当前的和未来新建的超链接都具有这些事件。
				
			思路:
				可以将事件统一绑定给document，这样点击超链接时由于事件的冒泡，会导致document上的点击事件被触发，这样只绑定一次，所有的超链接都会具有这些事件。
			
			委派就是将本该绑定给多个元素的事件，统一绑定给document，这样可以降低代码复杂度方便维护
			 */
			//const links = document.querySelectorAll("li a")
			const links = document.getElementsByTagName("a")
			const btn = document.getElementById("btn")
			const list = document.getElementById("list")


			//这种添加的事件，在新添加的链接中无法触发事件
			for (let i = 0; i < links.length; i++) {
				links[i].addEventListener("click", event => {
					//alert(event.target.textContent)
				})
			}

			document.addEventListener("click", event => {
				//在执行代码前，先来判断一下事件是由谁触发
				//检査event.target 是否在 links 中存在
				if ([...links].includes(event.target))
					alert(event.target.textContent)
			})

			//点击按钮后，在ul中添加一个新的li
			btn.addEventListener("click", event => {
				list.insertAdjacentHTML("beforeend", "<li><a href='javascript:;'>新链接</a></li>") //新添加的链接无法触发事件
			})
		</script>
	</body>
</html>